<template>
  <div class="bg-white border border-custom-border overflow-hidden cursor-pointer rounded-[6px]"
    v-for="item in cardData" :key="item.id" @click="handleCardClick(item)">
    <div class="w-full h-[172px] bg-no-repeat bg-center"
    style="background-size: contain;"
      :style="'background-image: url(' + item.cover + ');'">
      <span class="text-white text-sm px-2 py-0.5 bg-gradient-to-r h-6 w-14 rounded-[4px] mr-1"
        :class="statusColor(item.status)">
        {{ statusText(item.status) }}
      </span>
      <span v-if="item.ctype"
        class="text-white text-sm px-2 py-0.5 bg-gradient-to-r h-6 w-14 rounded-[4px] from-[#33C9FF] to-[#33A0FF]">
        {{ item.ctype }}
      </span>
    </div>
    <div class="px-4 py-4">
      <div class="flex items-center justify-between">
        <span class="text-custom-text text-base font-semibold">{{ item.name }}</span>
        <div class="flex items-center gap-2">
          <img src="@/assets/images/star.png" alt="" v-for="child in item.level">
        </div>
      </div>
      <div v-if="type == 2">
        <div class="mt-2 flex items-center justify-between">
          <p class="card-content-item">总分: <span class="text-custom-text/65">{{ item.total_score }}</span></p>
          <p class="card-content-item">建议时长: <span class="text-custom-text/65">{{ item.duration }}分钟</span></p>
        </div>
        <p class="card-content-item">上次考核: <span class="text-custom-text/65">{{ item.last_exam_time || '-' }}</span></p>
      </div>
      <div v-else-if="type == 3">
        <p class="card-content-item">考核得分: <span class="text-custom-text/65">{{ item.score }}</span></p>
        <p class="card-content-item">考核时间: <span class="text-custom-text/65">{{ filterTime(item.exam_time) }}</span></p>
      </div>
      <div v-else>
        <div class="mt-2 flex items-center justify-between">
          <p class="card-content-item">得分: <span class="text-custom-text/65">{{ item.score || '-' }} / {{
            item.total_score }}</span></p>
          <p class="card-content-item">建议时长: <span class="text-custom-text/65">{{ item.duration }}分钟</span></p>
        </div>
        <p class="card-content-item">考核时间: <span class="text-custom-text/65">{{ filterTime(item.exam_time) }}</span></p>
        <p class="card-content-item">上次考核: <span class="text-custom-text/65">{{ item.last_exam_time || '-' }}</span></p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, toRefs } from 'vue'
const props = defineProps({
  cardData: {
    type: Array,
    default: []
  },
  type: {
    type: String,
    default: '1'
  }
})
const emit = defineEmits(['cardClick'])
const handleCardClick = (item) => {
  emit('cardClick', item)
}
const { cardData } = toRefs(props)

const filterTime = (exam_time) => {
  if (exam_time && Array.isArray(exam_time) && exam_time.length === 2) {
    let start = exam_time[0];
    let end = exam_time[1].split(' ')[1];
    let result = `${start} - ${end}`;
    return result
  } else {
    return '-'
  }
}
const statusColor = computed(() => (status) => {
  if (status === '0') {
    return 'from-[#F4E377] to-[#FA9600]'
  } else if (status === '1') {
    return 'from-[#69E3AC] to-[#19B21E]'
  } else if (status === '-1') {
    return 'from-[#FCB191] to-[#FC474C]'
  }
})
const statusText = computed(() => (status) => {
  if (status === '0') {
    return '待通关'
  } else if (status === '1') {
    return '已通关'
  } else if (status === '-1') {
    return '未通关'
  }
})
</script>